<template>
    <div class="pieChart" ref="chartContainer"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';

const props = defineProps({
    data: {
        type: Array,
        required: true
    },
});

const chartContainer = ref(null);
let myChart = null as any;

const updateChart = () => {
    if (!chartContainer.value) return;

    // Initialize the chart
    myChart = echarts.init(chartContainer.value);

    // Define chart options
    const option = {
        color: [' #00E3FE', '#FFAC00', '#00A0E9', '#AA89BD'], // 自定义颜色数组
        tooltip: {
            trigger: 'item',
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['55%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: 'outside',  // 标签显示在外部
                    fontSize: 12, // 默认文字大小
                    color: "#fff",
                    formatter: function (params: any) {
                        return `${params.name} ${params.value}%`;  // 自定义单位和格式
                    }
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 12,
                        fontWeight: 'normal',

                    }
                },
                labelLine: {
                    show: true,
                    length: 15,  // 引线的长度
                    length2: 30, // 引线的第二段长度
                    smooth: 0.3,  // 设置引线的曲率
                    lineStyle: {
                        color: 'rgba(255,255,255,0.3)'  // 引线颜色
                    }
                },
                data: props.data,
            },
            {
                // 内环
                type: "pie",
                radius: ["0", "45%"],
                center: ["50%", "50%"],
                silent: true, //取消高亮
                data: [1],
                itemStyle: {
                    // 使用 linearGradient 创建从上到下的渐变
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(0,227,254,1)' },  // 渐变的起始颜色（上）
                        { offset: 1, color: 'rgba(0,227,254,0)' }   // 渐变的结束颜色（下）
                    ])
                },
                label: {
                    show: false,
                },
            },
        ],
        graphic: [
            {
                type: 'text',
                left: '45%', // 水平居中
                top: '40%', // 稍微上移以便腾出空间
                style: {
                    text: '120',
                    textAlign: 'center', // 水平居中
                    textVerticalAlign: 'middle', // 垂直居中
                    font: '16px DIN', // 字体样式和大小
                    // fill: '#FFAC00' // 文字颜色（第一行文字的颜色）
                    fill: 'rgba(255,172,0,1)' // 文字颜色（第一行文字的颜色）
                }
            },
            {
                type: 'text',
                left: '43%', // 水平居中
                top: '52%', // 稍微下移，确保第二行文字显示不重叠
                style: {
                    text: '任务总数',
                    textAlign: 'center', // 水平居中
                    textVerticalAlign: 'middle', // 垂直居中
                    font: '12px DIN', // 字体样式和大小
                    fill: '#fff' // 文字颜色（第二行文字的颜色）
                }
            }
        ]

    };
    console.log(option);

    // Set options
    myChart.setOption(option);

    // Handle resize
    window.addEventListener('resize', () => {
        myChart.resize();
    });
};

// Watch for data changes and update the chart
watch(() => props.data, () => {
    if (myChart) {
        updateChart();
    }
}, { immediate: true });

onMounted(() => {
    updateChart();
});
</script>

<style lang="scss" scoped>
.pieChart {
    width: 100%;
    height: vh(170);
    margin-bottom: vh(10);
}
</style>